<template>
    <Card>
        <Form ref="formInline" :model="searchData" :rules="ruleInline" label-colon autocomplete="off" >
            <Row style="height: 40px">
                <Col span="8">
                    <FormItem  prop="user" label="岗位名称" :label-width="80">
                        <Input v-model="searchData.positionName" clearable placeholder="请输入岗位名称" />
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem  prop="user" label="状态" :label-width="50">
                        <Select v-model="searchData.valid" clearable >
                            <Option value=1>正常</Option>
                            <Option value=0>停用</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem style="margin-left: 2em">
                        <Button type="primary" @click="queryData(true)"><Icon type="ios-search" />查询</Button>
                        <Button style="margin-left: 2em" type="primary" ghost @click="handleSubmit('formInline')"><Icon type="md-sync" />重置</Button>
                    </FormItem>
                </Col>
            </Row>
          <permission-button-group @handleEvent="handleEvent" permission-code-prefix="position_"/>
        </Form>
        <div>
            <Table border ref="selection" :columns="columnsData" :data="resultData" @on-selection-change="selectItem"></Table>
        </div>
        <div class="ivu-mt ivu-text-center">
            <Page :total="pager.total" :current="pager.current" show-elevator @on-change="pageChange" @on-page-size-change="pageSizeChange" :show-sizer="true"/>
        </div>
        <position-detail :can-edit="canEdit" :position-id="positionId" :show-modal="showModal" :title="modalTitle" @callbackByCancel="callbackByCancel" @callbackByOk="callbackByOk" />
    </Card>
</template>

<script>
    import {search,deleteData} from '@/api/positionApi'
    import PositionDetail from '@/views/group_management/position/components/position-detail'
    import PermissionButtonGroup from '@/components/permissionButton/permission-button-group'
    export default {
        components: {
            PositionDetail,
            PermissionButtonGroup
        },
        data () {
            return {
                showModal: false,
                modalTitle: '',
                canEdit: false,
                selectItems: [],
                positionId: '',
                searchData:{
                    positionName: '',
                    valid: '1',
                },
                pager:{
                    size:10,
                    current: 1,
                },
                formInline: {

                },
                ruleInline: {

                },
                resultData: [],
                columnsData: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '岗位名称',
                        key: 'positionName',
                        align: 'center'
                    },
                    {
                        title: '状态',
                        key: 'valid',
                        align: 'center',
                        render: (h, params) => {
                            if (params.row.valid===1){
                                return h('span','正常')
                            }else {
                                return h('span','关闭')
                            }

                        }
                    },
                    {
                        title: '操作',
                        key: 'address',
                        align: "center",
                        render: (h, params)=>{
                            return h('a',{
                                on:{
                                    click: ()=> {
                                        this.handleEvent('view_certi',params.row.address);
                                    }
                                }
                            },'编辑');
                        }
                    }
                ]
            }
        },
        created(){

        },
        mounted(){
            this.queryData()
        },
        methods: {
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$Message.success('Success!');
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            handleSelectAll (status) {
                this.$refs.selection.selectAll(status);
            },
            pageChange(page){
                this.pager.current = page
                this.queryData()
            },
            pageSizeChange(pageSize){
                this.pager.size = pageSize
                this.pager.current = 1
                this.queryData()
            },
            queryData(isSearch){
                if (isSearch){
                   this.pager.current = 1
                }
                search({
                    pager:this.pager,
                    queryData:this.searchData
                }).then( res => {
                    this.resultData = res.records
                    this.pager.total = res.total
                })
            },
            callbackByCancel () {
                this.showModal = false
            },
            callbackByOk(){
                this.showModal = false
                this.queryData()
            },
            selectItem(row){
                this.selectItems = row
            },
            handleEvent(event){
                if (event==='position_add'){
                    this.modalTitle = '添加岗位'
                    this.canEdit = true
                    this.positionId = null
                    this.showModal = true
                }else{
                    if (this.selectItems.length===0){
                        this.$Message.error('请先选择数据，后操作！')
                        return
                    }
                    if (event ==='position_view'||event ==='position_edit'){
                        this.canEdit = event !== 'view'
                        this.modalTitle = '岗位'
                        this.positionId = this.selectItems[0].id
                        this.showModal = true
                    }
                    if (event ==='position_delete'){
                        let ids = []
                        this.selectItems.forEach((item) => {
                            ids.push(item.id)
                        })
                        deleteData(ids).then(res=>{
                            this.$Message.success('删除成功！')
                            this.queryData()
                        })
                    }
                }
            }
        }
    }
</script>

<style scoped>

</style>